<template>
	<view>
		<swiper-tab-head :tabBars='tabBars' :tabIndex='tabIndex' @tabtap='tabtap' />

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current='tabIndex' @change='currentindex' :style="{height:swiperheight+'px'}"
				duration="200">
				<swiper-item>
					<template v-if="oldShop.length != 0">
						<scroll-view scroll-y="true" class="list" @scrolltolower='lower' :scroll-top="scrollTop">
							<baoxui :allList='oldShop' :TypeStatus="0"></baoxui>
							<uni-load-more :status="status" :content-text="contentText" />
						</scroll-view>
					</template>
					<template v-else>
						<view class="nothingImg">
							<image src="../../static/common/nothing.png" mode="aspectFill"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="nothing">没有数据</view>
					</template>
				</swiper-item>
				<swiper-item>
					<template v-if="newNeed.length != 0">
						<scroll-view scroll-y="true" class="list" @scrolltolower='lower' :scroll-top="scrollTop">
							<baoxui :allList='newNeed' :TypeStatus="1"></baoxui>
							<uni-load-more :status="status" :content-text="contentText" />
						</scroll-view>
					</template>
					<template v-else>
						<view class="nothingImg">
							<image src="../../static/common/nothing.png" mode="aspectFill"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="nothing">没有数据</view>
					</template>
				</swiper-item>
				<swiper-item>
					<template v-if="wancheng.length != 0">
						<scroll-view scroll-y="true" class="list" @scrolltolower='lower' :scroll-top="scrollTop">
							<baoxui :allList='wancheng' :TypeStatus="2"></baoxui>
							<uni-load-more color="#b3b3b3" :status="status" :content-text="contentText" />
						</scroll-view>
					</template>
					<template v-else>
						<view class="nothingImg">
							<image src="../../static/common/nothing.png" mode="aspectFill"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="nothing">没有数据</view>
					</template>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import SwiperTabHead from "../../components/common/swiper_tab_head.vue"
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'
	import baoxui from './baoxou.vue'
	export default {
		components: {
			SwiperTabHead,
			baoxui
		},
		data() {
			return {
				tabBars: [{
						'name': '待处理',
						'id': 0
					},
					{
						'name': '处理中',
						'id': 1
					},
					{
						'name': '已完成',
						'id': 2
					}
				],
				tabIndex: 0,
				swiperheight: 500,
				oldShop: [],
				newNeed: [],
				wancheng: [],
				status: 'noMore',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '',
					contentnomore: '没有更多'
				},
				scrollTop: 0,
				isEnd: false, //isEnd用于判断是否还有数据，没有数组停止数组请求
				classId: 0
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height;
				}
			});
			this.showlist(this.classId)
			let that = this
			uni.$on('chexiao', function() {
				that.showlist(this.classId)
			})
		},
		methods: {
			tabtap(index) {
				this.tabIndex = index;
				this.showlist(this.classId)
			},
			currentindex(e) {
				this.tabIndex = e.detail.current;
				this.classId = this.tabBars[this.tabIndex].id
				if (this.oldShop.length === 0 || this.newNeed.length === 0 || this.wancheng.length === 0) {
					this.isEnd = false;
					this.showlist(this.classId)
				}
			},
			lower(id) {
				this.status = 'more'; //设置sataus是更多
				if (this.isEnd === true) {
					return
				}
				this.showlist(this.classId)
			},
			//滚动时触发事件
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			//切换scroll-view事件
			changeScrollView() {
				this.scrollTop = 0; //回到最顶部
			},
			showlist(id) {
				if (this.isEnd) {
					return
				}
				this.request({
					url: '/v1/repairs',
					data: {
						'filter[status]': id
					}
				}).then((res) => {
					// console.log(res)
					if (this.tabIndex === 0) {
						let newArrData = res.data;
						this.oldShop = newArrData
					} else if (this.tabIndex === 1) {
						let newArrData = res.data;
						this.newNeed = newArrData
					} else if (this.tabIndex === 2) {
						let newArrData = res.data;
						this.wancheng = newArrData
					}
					if (res.data.length <= 0) {
						this.isEnd = true;
						this.status = "noMore";
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;

		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 100upx);
		}

		.list {
			width: 750rpx;
			height: 100%;
		}
	}

	.nothing {
		color: #B3B3B3;
		width: 100%;
		height: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}
</style>
